class List {
    constructor() {
        this.getData();
        this.bindEve();
        //默认页码
        this.currentPage = 1;
        //使用锁
        this.lock = false;
        this.dengZhu()

        //  获取页面中分页的节点  给其绑定点击事件,这里是获取分页的父元素给父元素委托实现
        this.$('.pagination').addEventListener('click', this.fenYe);
        //跳转()

        // console.log(  this.$('.tiaozhuan'));

    }

    tiaozhuangoods=()=> {
        let goods = this.$('.tz1')
        console.log(goods);
        goods.forEach(key => {
            console.log(key);
            key.onclick = (ele) => {
                let eve = ele.target
                if (eve.nodeName != 'A' && eve.className != '.qianggou') {
                    let gid = key.dataset.id;
                    console.log(gid);
                    localStorage.setItem('gid',gid);
                    location.assign('./shopping2.html')
                }
            }
        })
}
 

    //登录和注册 登录改变头像 和 名字
    dengZhu() {
        let dengL = this.$('.dengL')
        // console.log(1111);
        let zhuC = this.$('.zhuC')
        let nicName1 = localStorage.getItem('nickname')
        let img = `<img src="./img/Lisa.webp" width="40px" height="40px" alt="">`
        if (nicName1) {
            // console.log(111);
            dengL.innerHTML = nicName1;
            zhuC.innerHTML = img;
        }
    }

    // 绑定事件的方法
    bindEve() {
        //给ul绑定点击事件
        //this.addCart 是ul的事件回调方法,故内部this
        this.$('.bd-goods-goodsitem ul').addEventListener('click', this.checkLogin.bind(this))
        //滚动条事件
        window.addEventListener('scroll', this.lazyLoader)
        
        

    }

    //#获取数据
    async getData(page = 1) {
        // console.log('11111');
        //发送ajax请求获取数据
        // ! 1 await等待后面的promise解包完成,拿到最后的结果
        //把函数内变成了同步
        let { status, data } = await axios.get('http://localhost:8888/goods/list?current=' + page);
        // console.log(goodsData);
        // console.log(status, data);
        // ! 2 拼接数据
        // 判断请求的状态是否成功
        //status 是ajax服务器请求成功
        if (!status == 200 && !data.code == 1) throw new Error('网络请求失败')
        // ! 3 循环渲染数据,追加页面
        let html = '';
        data.list.forEach(goods => {
            // console.log(goods);
            html += `<li class="tz1"  data-id="${goods.goods_id}">
        <a href="#none"> <div class="body-box">
            <div class="body-box-img">
                <div class="body-box-img-1" href="./shopping">
                  <img src="${goods.img_big_logo}"> 
                </div>              
            
            <div class="box-name">
                <div class="box-name-1">
                    ${goods.title}
                </div>
                
            </div>
            <div class="body-box-rmb">
                <div class="body-box-rmb-1">
                    ${goods.current_price}
                </div>             
            </div>         
            <div class=" .body-box-rmb-3">
            <div class=".body-box-rmb-3">
                ${goods.price}
            </div>             
          </div>         
     </div></a>
     
        <a href="#none" class="qianggou">立即抢购</a>
           
        
    </li>`
        });
        // console.log(html);
        // ! 追加到ul中
        // console.log(this.$('.bd-goods-goodsitem'));
        // this.$('.bd-goods-goodsitem ul').innerHTML += html;



     
        if (((this.currentPage) % 6) != 0) {
            // console.log(this.currentPage);

            this.$('.bd-goods-goodsitem ul').innerHTML += html;

        } this.currentPage++
        // let li=document.querySelectorAll('.tz1');
        // li.addEventListener('click', this.tiaozhuangoods)
        this.tiaozhuangoods();
        
    }
   
    

    // ! 加入购物车
    checkLogin(eve) {

        // console.log(this);
        //判断点击的是否为a标签
        // console.log(eve.target.classList);
        if (eve.target.nodeName != 'A' || eve.target.className != 'qianggou') return;
        // console.log(eve.target);
        // 判断用户是否登录,如果local中有token,表示登录
        let token = localStorage.getItem('token')
        // console.log(token);
        //没有token表示未登录,跳转到登录页面
        if (!token) location.assign('./login.html?returnUrl=./product.html')   // assign是方法
        //将商品加入购物车
        //获取商品id和用户id
        let goodsId = eve.target.parentNode.parentNode.dataset.id;
        let userId = localStorage.getItem('user_id')
        // console.log(goodsId);
        this.addCartGoods(goodsId, userId);


    }
    addCartGoods(gId, uId) {
        // console.log(gId,uId);
        //给添加购物车接口发送请求
        //调用购物车接口,后台验证是否为登录状态,传递token
        const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        let param = `id=${uId}&goodsId=${gId}`;
        axios.post('http://localhost:8888/cart/add', param).then(({ data, status }) => {
            // console.log(data,status);
            //判断添加购物车是否成功
            if (status == 200 && data.code == 1) {
                layer.open({
                    title: '商品添加成功'
                    , content: '去购物车,查看商品'
                    , btn: ['留下', "去往"]
                    , btn2: function (index, layero) {
                        //    console.log('去购物车');
                        location.assign('./cart2.html')
                    }
                });
            } else if (status == 200 && data.code == 401) {
                //登录过期,重新登录
                //清除local中的token和userid
                localStorage.removeItem('token');
                localStorage.removeItem('user_id')
                //跳转登录页面
                location.assign('./login.html?returnUrl=./product.html')

            } else {
                layer.open({
                    title: '失败提示框'
                    , content: '商品添加失败'
                    , time: 3000
                }
                );
            }
        });
    }




    // 分页的实现
    fenYe = (event) => {
        // 这里获取页码的节点

        let node = event.target;
        console.log(node);
        //   这里我们设置一个页面可以出现的最多商品的数量的变量
        let num = 6;
        this.currentPage = num * (node.innerHTML - 1) + 1;
        console.log(this.currentPage);

        //   这里要实现,点击分页按钮清空页面中服务器追加的内容
        //   console.log(this.yeShu);
        this.$('#commoditydata').innerHTML = ' ';
        this.lazyLoader()

        //   console.log(node)
    }


    //!懒加载
    //当前余姚内容的高度==滚动条顶部的高度+可视区的高度
    //*获取新的数据 当前实际内容高度<滚动条距离顶部的高度+可视区的高度
    lazyLoader = () => {
        //需要滚动条高度,可视区高度,实际内容高度
        let top = document.documentElement.scrollTop;
        //console.log(top); //获取滚动条的高度
        let cliH = document.documentElement.clientHeight;//获取可视区高度420
        // console.log(cliH); 475
        let conH = this.$('.bd-goods').offsetHeight;
        // console.log(conH);//内容的高度
        //*判断滚动条的高度+可视区的高度>实际内容的高度时 加载新数据
        if (top + cliH > (conH + 480)) {
            //一瞬间满足,会不停触发数据加载,使用节流防抖
            //如果是锁着的,就结束代码执行
            if (this.lock) return;
            this.lock = true;
            //指定时间开锁
            setTimeout(() => {
                this.lock = false;
            }, 1000)
            if (this.currentPage % 6 == 0) return
            // console.log(111);
            this.getData(this.currentPage)
        }

    }


    // ! 封装获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele)
        // 如果获取到的是,当个节点的集合,就返回单个节点,如果多个集合就返回多个
        return res.length == 1 ? res[0] : res;
    }


}
new List();